<html>
<head>
<title>Image annotations</title>
<style type='text/css'>
body {
	background: #e8e6de;
}

a {
outline:none;
}

.entry {
	width: 710px;
	background: #ffffff;
	padding:8px;
	border:1px solid #bbbbbb;
	margin:5px auto;
	-moz-border-radius:8px;
}

span.link a {
	font-size:150%;
	color: #000000;
	text-decoration:none;
}

a.vote_up, a.vote_down {
	display:inline-block;
	background-repeat:none;
	background-position:center;
	height:16px;
	width:16px;
	margin-left:4px;
	text-indent:-900%;
}

a.vote_up {
	background:url("images/thumb_up.png");
}

a.vote_down {
	background:url("images/thumb_down.png");
}
</style>

<script src="jquery.js" type="text/javascript"></script>
<script type='text/javascript' src='jquery.pack.js'></script>

<script type="text/javascript">
$(document).ready(function() {
	var path = getUrlVars()["path"];
		//pulls comments and usernames with json based on imagepath
        $.getJSON('jsonCallBack.php?path=' + path, function(data) {
			$.each(data.layers, function(i,item){
				
				$('#comments').append('<span id = ' + 'span_'+ item.username +' style="display:none"><p>'+item.username+': '+item.comment+'</p></span>');
							   
			  });
		});


});

//displays comment based on layer hover.  Called from inside svg with onmouseover
function displayComment(name){
		var path = getUrlVars()["path"];
		$.getJSON('votes_CallBack.php?filepath=' + path + '&username='+name, function(data) {
			$(".votes_count").html('<p>Votes Up: '+data.votes_up+' Votes Down: '+data.votes_down+'</p>');
	
		//to make it fade out and only vote once change vote_buttons to votes_count
		$(".votes_count").attr("id", "vote_buttons"+data.id);
		$(".vote_buttons").attr("id", "vote_buttons"+data.id);
		$(".vote_up").attr("id", data.id);
		$(".vote_down").attr("id", data.id);
		});


		$("[id*=span_]").hide();
		$('#span_'+name).show();
		
		$('#vote_buttons').show();
};



//toggles size of svg.  Called from inside svg with onclick
function toggleSize(){
	var small = 1.00;
	var large = 2;
	var default_width = 640;
	
	var box	=  document.getElementById('svgid');
	if((box.width*small)==(default_width*small)){
		SVGscale(large);
		}
	else{
		SVGscale(small);
	}
	

};
//pulls url params
function getUrlVars()	{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
};

//scales svg.  Must have necessary script embedded in svg for this to function
var W3CDOM = (document.createElement && document.getElementsByTagName);
window.onload 	= init;
function init(evt) {
	SVGscale(1.00);
};
function SVGscale(scale) {
	window.SVGsetDimension(640*scale,480*scale);
	window.SVGsetScale(scale,scale);	
        if (!W3CDOM) return;
	var box 	=  document.getElementById('svgid');
	box.width  	= 640*scale;
	box.height 	= 480*scale;
};


$(function(){
	$("a.vote_up").click(function(){
	//get the id
	the_id = $(this).attr('id');
		
	// show the spinner
	//$(this).parent().append("<img src='images/spinner.gif'/>");
	
	//fadeout the vote-count 
	$("span#votes_count"+the_id).fadeOut("fast");
	
	//the main ajax request
		$.ajax({
			type: "POST",
			data: "action=vote_up&id="+$(this).attr("id"),
			url: "votes.php",
			success: function(msg)
			{
				$("span#votes_count"+the_id).html(msg);
				//fadein the vote count
				$("span#votes_count"+the_id).fadeIn();
				//remove the spinner
				//$("span#vote_buttons"+the_id).remove();
				var name = $("span:visible").attr('id');
				displayComment(name.substring(5));
				
			}
		});
	});
	
	$("a.vote_down").click(function(){
	//get the id
	the_id = $(this).attr('id');
	
	// show the spinner
	//$(this).parent().append("<img src='images/spinner.gif'/>");
	
	//the main ajax request
		$.ajax({
			type: "POST",
			data: "action=vote_down&id="+$(this).attr("id"),
			url: "votes.php",
			success: function(msg)
			{
				$("span#votes_count"+the_id).fadeOut();
				$("span#votes_count"+the_id).html(msg);
				$("span#votes_count"+the_id).fadeIn();
				//$("span#vote_buttons"+the_id).remove();
				
				var name = $("span:visible").attr('id');
				displayComment(name.substring(5));
			}
		});
	});
});	

</script>

</head>
<body>
<h1>Layers</h1>
<div id="toggleSize">
<a href="javascript:toggleSize();">Toggle Size</a>
</div>
<div id="svg" style="float:left;clear:none">
<object id='svgid' type="image/svg+xml" data="layer_merge.php?path=<?php echo htmlentities($_GET['path']) ?>" width="100%" height="100%"></object>
</div>
<div id="comments">


</div>

<div id="votes">
	<span class='votes_count' id='votes_count'></span>

	<span class='vote_buttons' id='vote_buttons' style="display:none">
		<a href='javascript:;' class='vote_up' id='blah'>Vote Up!</a>
		<a href='javascript:;' class='vote_down' id='blah'>Vote Down!</a>
	</span>


</div>
</body>
</html>

	

